<template>
  <div class="tree-container">
    <a-tree
      checkable
      :tree-data="treeData"
      :blockNode="false"
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      @select="onSelect"
      @check="onCheck"
      @expand="onExpand"
    >
    </a-tree>
  </div>
</template>

<script lang="ts">
import * as treeWork from "./SideNav"
import { defineComponent, ref, watch } from "vue"
// import useLifecycle from "@mars/common/uses/use-lifecycle"
import * as loadModel from "@mars/widgets/LoadModel/map"

const treeData = treeWork.treeData
export default defineComponent({
  setup() {
    const expandedKeys = ref<string[]>(["0", "1", "2"])
    const selectedKeys = ref<string[]>([])
    const checkedKeys = ref<string[]>(["101010"])
    // watch(expandedKeys, () => {
    //   console.log('展开事件', expandedKeys);
    // });
    // watch(selectedKeys,() => {
    //   console.log('点击事件', selectedKeys);
    //   console.log(e)
    // });
    // watch(checkedKeys, () => {
    //   console.log('选中事件', checkedKeys);
    // });

    const onSelect = (selectedKeys: string[], event) => {
      console.log(selectedKeys, event)
      if (event.node.checked) {
        console.log(loadModel.map.getLayerById(event.node.key))
        loadModel.map.getLayerById(event.node.key).flyTo()
      }
    }
    const onCheck = (checkedKeys: string[], event) => {
      console.log(checkedKeys, event)
      if (loadModel.map.hasLayer(event.node.key)) {
        loadModel.map.getLayerById(event.node.key).show = event.checked
        if (checkedKeys.indexOf("dixiaguanlang") != -1) {
          loadModel.map.getThing("underground").enabled = true
        } else if (checkedKeys.indexOf("pipe") != -1) {
          loadModel.map.getThing("underground").enabled = true
        } else {
          loadModel.map.getThing("underground").enabled = false
        }
      } else {
        console.log("找不到图层", event.node.key)
        checkedKeys.pop()
      }
    }
    const onExpand = (expandedKeys: string[], event) => {
      console.log(expandedKeys, event)
    }
    return {
      treeData,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      onSelect,
      onCheck,
      onExpand
    }
  }
})
// loadModel.eventTarget.on("load",(event:any)=>{
//   console.log()
// })
</script>

<style scoped lang="less">
.tree-container {
  width: 100%;
}
</style>
